<template>
  <div class="viewContain">
    <!-- 查询框 -->
    <el-form ref="listQuery" :model="listQuery" size="small">
      <el-row type="flex" justify="start">
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 6 }">
          <el-form-item label="文件名称 :" prop="fileName" label-width="80px">
            <el-input
              v-model="listQuery.fileName"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleSearch"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 5 }" :xl="{ span: 5 }">
          <el-form-item label="起止时间 :" prop="beginTime" label-width="120px">
            <el-date-picker
              v-model="listQuery.beginTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              style="width:100%"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 5 }" :xl="{ span: 5 }">
          <el-form-item label="-" prop="endTime" label-width="30px">
            <el-date-picker
              v-model="listQuery.endTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width:100%;margin-left:0px;"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 4 }" :xl="{ span: 4 }">
          <el-form-item label-width="10px">
            <el-button size="mini" type="primary" style="margin-left:0;" @click="handleSearch">查询</el-button>
            <el-button size="mini" type="primary" plain @click="resetInput">重置</el-button>
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 4 }" :xl="{ span: 4 }">
          <el-form-item label-width="10px" align="right">
            <el-button size="mini" type="primary" plain @click="handleBack">返回基本管理</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 表格数据 -->
    <el-table
      ref="table"
      v-loading="loading"
      fit
      :data="tableData"
      border
      size="mini"
    >
      <el-table-column label="序号" align="center">
        <template slot-scope="scope">
          <span>{{ (listQuery.pageNo - 1) * listQuery.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="fileName" label="文件名称" align="center" width="200" />
      <el-table-column prop="createTime" label="日期" align="center" width="150" />
      <el-table-column prop="totalNum" label="总数" align="center" width="115" />
      <el-table-column prop="successNum" label="成功" align="center" width="115" />
      <el-table-column prop="failNum" label="失败" align="center" width="150" />
      <el-table-column prop="isDataSave" label="完成状态" align="center" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.isDataSave == 'N'">失败</span>
          <span v-if="scope.row.isDataSave == 'Y'">成功</span>
          <span v-if="scope.row.isDataSave == 'R'">暂未导入</span>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="用户" align="center" width="150" />
      <el-table-column align="center" fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button class="text-button" size="mini" @click="handleDownLoad(scope.row)">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total-count="totalCount"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import ComApiUrl from '@a/comomApi.js'
import { commonMixin } from '@v/mixin/commonMixin.js'
import pagination from '@/components/pagination/index.vue'
import { getTemplateRegisterState } from '@a/device/basic.js'

export default {
  components: { pagination },
  mixins: [commonMixin],
  data() {
    return {
      comApiUrlList: new ComApiUrl('/device/api/v2/deviceInfo/getDeviceLogList'),
      listQuery: {
        fileName: '',
        beginTime: '',
        endTime: '',
        pageNo: 1,
        pageSize: 10,
        userId: ''
      },
      loading: false,
      tableData: [{
        userId: '',
        totalNum: '',
        successNum: '',
        isDataSave: '',
        fileName: '',
        failNum: '',
        devLogId: '',
        createTime: '',
        userName: ''
      }]
    }
  },
  mounted() {
    this.listQuery.userId = this.$route.params.userId
    this.getList()
  },
  methods: {
    getList() {
      // eslint-disable-next-line no-undef
      this.getInfo()
    },
    handleBack() {
      this.$store.dispatch('tagsView/delVisitedView', this.$route)
      this.$router.go(-1)
    },

    handleSearch() {
      this.getInfo()
    },

    resetInput() {
      this.listQuery.fileName = ''
      this.listQuery.beginTime = ''
      this.listQuery.endTime = ''
      this.getInfo()
    },

    handleDownLoad(row) {
      console.log('下载批量注册信息')
      getTemplateRegisterState(row.devLogId).then(res => {
        var blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
        var url = window.URL.createObjectURL(blob)
        var aLink = document.createElement('a')
        aLink.style.display = 'none'
        aLink.href = url
        aLink.setAttribute('download', 'log.xls')
        document.body.appendChild(aLink)
        aLink.click()
        document.body.removeChild(aLink) // 下载完成移除元素
        window.URL.revokeObjectURL(url) // 释放掉blob对象
      })
    }
  }
}

</script>

<style lang="scss" scoped>

</style>
